<template>
	<view>
		<view class="headcontent">
			<view class="contentbox" :style="'height:'+headHeight+'rpx;'">
				<!-- <image src="../../../static/images/cc/left.png" mode="widthFix" @click="goBack"></image> -->
				<view>个人中心</view>
			</view>
		</view>
		<view class="home"></view>
		<view class="head">
			<view class="user">
				<image
					src="https://img1.baidu.com/it/u=1748709408,3807072179&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
					mode="aspectFill" class="userimage"></image>
				<view class="con">
					<view class="tel">156****0065</view>
					<view class="lv">LV 1</view>
				</view>
			</view>
			<view class="set">
				<image src="../../../static/images/cc/my1.png" mode="widthFix"></image>
				<view class="unique">
					<image src="../../../static/images/cc/my2.png" mode="widthFix"></image>
					<view></view>
				</view>
			</view>
		</view>
		<view class="fbox">
			<view class="four">
				<view class="num">7</view>
				<view class="words">收藏夹</view>
			</view>
			<view class="four">
				<view class="num">2</view>
				<view class="words">关注店铺</view>
			</view>
			<view class="four">
				<view class="num">24</view>
				<view class="words">足迹</view>
			</view>
			<view class="four">
				<view class="num">1200</view>
				<view class="words">积分</view>
			</view>
		</view>
		<view class="memberBox">
			<view class="menber">
				<image src="../../../static/images/cc/my3.png" mode="widthFix"></image>
				<view>超级会员卡</view>
			</view>
			<view class="open">立即开通</view>
		</view>
		<view class="orderBox">
			<view class="orderHead">
				<view class="orderTitle">我的订单</view>
				<view class="orderAll">
					<view>全部订单</view>
					<image src="../../../static/images/cc/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="orderType">
				<view class="orderState">
					<image src="../../../static/images/cc/o1.png" mode="widthFix"></image>
					<view>待支付</view>
				</view>
				<view class="orderState">
					<image src="../../../static/images/cc/o2.png" mode="widthFix"></image>
					<view>待发货</view>
				</view>
				<view class="orderState">
					<image src="../../../static/images/cc/o3.png" mode="widthFix"></image>
					<view>待收货</view>
				</view>
				<view class="orderState">
					<image src="../../../static/images/cc/o4.png" mode="widthFix"></image>
					<view>待评价</view>
				</view>
				<view class="orderState">
					<image src="../../../static/images/cc/o5.png" mode="widthFix"></image>
					<view>退货/售后</view>
				</view>
			</view>
		</view>
		<view class="moneyBox">
			<view class="orderHead">
				<view class="orderTitle">我的资产</view>
				<view class="orderAll">
					<view>账单明细</view>
					<image src="../../../static/images/cc/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="cl">
				<view class="three">
					<view class="nums">1200</view>
					<view class="names">积分</view>
				</view>
				<view class="line"></view>
				<view class="three">
					<view class="nums">899.99</view>
					<view class="names">余额</view>
				</view>
				<view class="line"></view>
				<view class="three">
					<view class="nums red">5</view>
					<view class="names red">优惠券</view>
				</view>
			</view>
		</view>
		<view class="footCon">
			<view class="common">常用工具</view>
			<view class="banner">
				<swiper :indicator-dots="false" :autoplay="false" :circular="true" :duration="500" @change="tab">
					<swiper-item>
						<view class="swiper-item">
							<view class="swiprList">
								<image src="../../../static/images/cc/mm1.png" mode="widthFix"></image>
								<view>领取卡券</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm2.png" mode="widthFix"></image>
								<view>积分商城</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm3.png" mode="widthFix"></image>
								<view>拼团订单</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm4.png" mode="widthFix"></image>
								<view>回收订单</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm5.png" mode="widthFix"></image>
								<view>景点门票</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm6.png" mode="widthFix"></image>
								<view>地址管理</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm7.png" mode="widthFix"></image>
								<view>银行卡</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm8.png" mode="widthFix"></image>
								<view>签到</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm9.png" mode="widthFix"></image>
								<view>商家入驻</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm10.png" mode="widthFix"></image>
								<view>碳收中心</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<view class="swiprList">
								<image src="../../../static/images/cc/mm11.png" mode="widthFix"></image>
								<view>帮助中心</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm12.png" mode="widthFix"></image>
								<view>关于我们</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm13.png" mode="widthFix"></image>
								<view>隐私政策</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm14.png" mode="widthFix"></image>
								<view>抽奖中心</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm15.png" mode="widthFix"></image>
								<view>申请技师</view>
							</view>
							<view class="swiprList">
								<image src="../../../static/images/cc/mm16.png" mode="widthFix"></image>
								<view>服务列表</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dropBox">
					<view :class="num==index?'drop select':'drop'" v-for="(item,index) in 2"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				headHeight: 0
			};
		},
		created() {
			this.headHeight = (uni.getSystemInfoSync().statusBarHeight + 45) * 2
		},
		methods: {
			tab(e) {
				this.num = e.detail.current
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.headcontent {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: 0;
		z-index: 1;

		.contentbox {
			width: 750rpx;
			display: flex;
			position: relative;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-left: 20rpx;
				position: relative;
				z-index: 999;
			}

			view {
				width: 100%;
				text-align: center;
				position: absolute;
			}
		}
	}

	.home {
		width: 750rpx;
		height: 500rpx;
		position: absolute;
		background-image: linear-gradient(80deg, #E6E8F7, #FCC4C4);
		filter: blur(20rpx);
		top: 0;
	}

	.head {
		width: 690rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 30rpx;
		position: relative;
		margin-top: 30rpx;

		.user {
			display: flex;
			align-items: center;

			.userimage {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				border: 1px solid #CA281C;
			}

			.con {
				margin-left: 26rpx;

				.tel {
					font-size: 33rpx;
					color: #3D3D3D;
				}

				.lv {
					width: 80rpx;
					height: 32rpx;
					background: linear-gradient(270deg, #FDCD69 0%, #FDDB9B 100%);
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #5E4707;
					font-weight: bold;
					margin-top: 14rpx;
				}
			}
		}

		.set {
			display: flex;

			image {
				width: 54rpx;
				height: 54rpx;
				margin-left: 34rpx;
			}

			.unique {
				position: relative;

				view {
					width: 10rpx;
					height: 10rpx;
					position: absolute;
					top: 6rpx;
					right: 2rpx;
					background: #84BD00;
					border: 1px solid #FFFFFF;
					border-radius: 50%;
				}
			}
		}
	}

	.fbox {
		width: 750rpx;
		display: flex;
		padding-top: 60rpx;
		padding-bottom: 50rpx;
		position: relative;

		.four {
			width: 25%;

			.num {
				width: 100%;
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				color: #333333;
			}

			.words {
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				color: #3D3D3D;
				margin-top: 10rpx;
			}
		}
	}

	.memberBox {
		width: 690rpx;
		height: 100rpx;
		background-color: #100219;
		border-radius: 20rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.menber {
			display: flex;
			align-items: center;
			margin-left: 30rpx;

			image {
				width: 66rpx;
				height: 66rpx;
			}

			view {
				font-size: 26rpx;
				margin-left: 12rpx;
				color: #F2D59C;
			}
		}

		.open {
			width: 130rpx;
			height: 54rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #100219;
			background: linear-gradient(270deg, #FCCB73 5%, #F9DB9C 100%);
			margin-right: 22rpx;
		}
	}

	.orderBox {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		padding-top: 36rpx;
		padding-bottom: 50rpx;
		position: relative;

		.orderHead {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.orderTitle {
				font-size: 26rpx;
				color: #3D3D3D;
			}

			.orderAll {
				display: flex;
				align-items: center;

				view {
					font-size: 24rpx;
					color: #999999;
				}

				image {
					width: 12rpx;
					height: 12rpx;
					margin-top: 4rpx;
					margin-left: 10rpx;
				}
			}
		}

		.orderType {
			width: 100%;
			display: flex;
			margin-top: 44rpx;

			.orderState {
				width: 20%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				view {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 8rpx;
				}
			}
		}
	}

	.moneyBox {
		width: 690rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-top: 36rpx;
		padding-bottom: 50rpx;

		.orderHead {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.orderTitle {
				font-size: 26rpx;
				color: #3D3D3D;
			}

			.orderAll {
				display: flex;
				align-items: center;

				view {
					font-size: 24rpx;
					color: #999999;
				}

				image {
					width: 12rpx;
					height: 12rpx;
					margin-top: 4rpx;
					margin-left: 10rpx;
				}
			}
		}

		.cl {
			display: flex;
			align-items: center;
			margin-top: 60rpx;

			.line {
				height: 73rpx;
				border-left: 1px solid #D8D8D8;
			}

			.three {
				width: 230rpx;
				text-align: center;

				.nums {
					font-size: 40rpx;
				}

				.names {
					font-size: 24rpx;
					color: #666666;
					margin-top: 10rpx;
				}

				.red {
					color: #E94639;
				}
			}
		}
	}

	.footCon {
		width: 690rpx;
		background-color: #ffffff;
		margin-top: 30rpx;
		margin-left: 30rpx;
		border-radius: 20rpx;
		padding-top: 36rpx;

		.common {
			font-size: 26rpx;
			color: #3D3D3D;
			margin-left: 30rpx;
		}

		.banner {
			width: 690rpx;
			height: 368rpx;
			position: relative;

			swiper {
				width: 690rpx;
				height: 368rpx;
				position: relative;



				.swiper-item {
					width: 690rpx;
					height: 368rpx;
					display: flex;
					align-content: flex-start;
					flex-wrap: wrap;

					.swiprList {
						width: 138rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						margin-top: 46rpx;

						image {
							width: 60rpx;
							height: 60rpx;
						}

						view {
							font-size: 24rpx;
							color: #3D3D3D;
							width: 100%;
							text-align: center;
							margin-top: 10rpx;
						}
					}

					// image {
					// 	width: 100%;
					// 	height: 100%;
					// }
				}
			}

			.dropBox {
				width: 100%;
				display: flex;
				position: absolute;
				justify-content: center;
				bottom: 30rpx;

				.drop {
					width: 57rpx;
					height: 5rpx;
					background: #D8D8D8;
					border-radius: 50rpx;
				}

				.select {
					background-color: #E94639;
				}
			}
		}
	}
</style>